{% extends "pos/base.html" %}

<!-- Page title  -->
{% block title %}Add category{% endblock title %}

<!-- Specific Page CSS goes HERE  -->
{% block stylesheets %}{% endblock stylesheets %}

<!-- Page Heading -->
{% block heading %}Add category{% endblock heading %}

<!-- Page content  -->
{% block content %}
<!--Go back-->
<div class="row ml-0 mb-3">
    <a href="{% url 'products:categories_list' %}">
        <button type="button" class="btn btn-info font-weight-bold">
            <i class="fas fa-long-arrow-alt-left mr-2"></i>
            Go back
        </button>
    </a>
</div>


<div class="row">
    <div class="card col-md-8">
        <div class="card-body">
            <form action="{% url 'products:categories_add' %}"  method="post">
                {% csrf_token %}
                <div class="form-row">
                    <div class="form-group col-md-8">
                        <label for="inputDescription">Name</label>
                        <input type="text" class="form-control" name="name" placeholder="Drinks..." required>
                    </div>
                    <div class="form-group col-md-4">
                        <label for="state">State</label>
                        <select name="state" class="form-control" required>
                            {% for status in category_status %}
                            <option value="{{status.0}}">{{status.1}}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group col-md-12">
                        <label for="inputDescription">Description</label>
                        <input type="text" name="description" class="form-control" placeholder="Drinks and beverages.." required>
                    </div>
                </div>
               
                <button type="submit" class="btn btn-success font-weight-bold">Create category</button>
               
            </form>
        </div>
    </div>
</div>
{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}{% endblock javascripts %}